import React, { useEffect, useState } from 'react'
import MyHead from '../../components/MyHead'
import { useSelector, useDispatch } from 'react-redux';
import { getGoodInfoAsync } from '../../rtk/modules/data';
import { IndexBar, List, SearchBar, Empty, Image } from 'antd-mobile'
import "./index.scss"
import Clist from '../../components/Clist';
import { useThrottleFn } from 'ahooks';


const Search = () => {

    const goodList = useSelector((state: any) => state.data.goodList)
    const dispatch: any = useDispatch()
    const [list, setList] = useState<any>([])
    const [toggle, setToggle] = useState<Boolean>(false)
    useEffect(() => {
        dispatch(getGoodInfoAsync({}))
    }, [dispatch])


    const onCancel = () => {
        setToggle(false)
        setList([]);
    }

    const onSearch = (value: any) => {
        var arr = goodList.filter((item: any) => item.name.indexOf(value) > 0)
        console.log(arr)
        setToggle(true)
        setList([...arr]);
    }

    const { run } = useThrottleFn(
        (value: any) => {
            var arr = goodList.filter((item: any) => item.name.indexOf(value) > 0)
            console.log(arr)
            setToggle(true)
            setList([...arr]);
        },
        { wait: 500 },
    );

    return (
        <div className='pg search ' >
            <MyHead title='搜索' />
            <div className='searchbar' >
                <SearchBar onCancel={onCancel} onChange={run} placeholder='请输入商品关键字' showCancelButton={() => true} />
            </div>
            {
                toggle && <div className="serach-list">
                    {
                        list.length > 0 ?
                            <Clist goods={list}></Clist>
                            : <div>
                                <Empty
                                    style={{ padding: '64px 0' }}
                                    description='没有搜索到对应的数据'
                                />
                            </div>
                    }
                </div>
            }
        </div>
    )
}

export default Search